<template>
  <div class="nowAlarm">
    <div class="mains_contain">
      <div class="contant">
        <el-form :inline="true" label-position="left" :model="searchForm" size="small">
          <el-form-item label="级别">
            <el-select v-model="searchForm.level" clearable placeholder="请选择级别">
              <el-option label="警告" value="Warning"></el-option>
              <el-option label="次要" value="Minor"></el-option>
              <el-option label="严重" value="Major"></el-option>
              <el-option label="致命" value="Critical"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备标识">
            <el-input v-model="searchForm.nodeId" clearable placeholder="请输入设备标识" />
          </el-form-item>
          <el-form-item label="告警名称">
            <el-input v-model="searchForm.name" clearable placeholder="请输入名称" />
          </el-form-item>

          <el-form-item label="发生时间">
            <el-date-picker v-model="searchForm.pickertime" size="small" @change="onChange" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" align="right" unlink-panels range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" clearable :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search" size="mini" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="deleteAll" size="mini" icon="el-icon-delete">批量清除</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%" fit @selection-change="handleSelectionChange" :max-height="maxHeight" border stripe size="mini" highlight-current-row
          :header-cell-style="{background:'#e5e5e5',color:'#000'}">
          <el-table-column type="selection" label="全选" width="40" />
          <el-table-column type="expand">
            <template slot-scope="props">
              <div class="tableTitle">详细信息</div>
              <ul class="detailUl">
                <li>
                  <span>名称：</span>
                  <span>{{ props.row.name }}</span>
                </li>
                <li>
                  <span>告警来源：</span>
                  <span>{{ props.row.locateInformation }}</span>
                </li>
                <li>
                  <span>告警类型：</span>
                  <span>{{ props.row.type }}</span>
                </li>
                <li>
                  <span>设备标识：</span>
                  <span>{{ props.row.nodeId }}</span>
                </li>
                <li>
                  <span>附加信息：</span>
                  <span>{{ props.row.reason }}</span>
                </li>
                <li>
                  <span>发生时间：</span>
                  <span>{{ props.row.createTime  | formatTime}}</span>
                </li>
              </ul>
            </template>
          </el-table-column>

          <el-table-column prop="level" label="级别"  width="120" align="center">
            <template slot-scope="{row}" >
              <div class="jbIcon" v-if="row.level == 'Critical'">
                <svg-icon icon-class="jb4" />
                <span style="color:#d81e06">致命</span>
              </div>
              <div class="jbIcon" v-if="row.level == 'Major'">
                <svg-icon icon-class="jb3" />
                <span style="color:#FB8B16">严重</span>
              </div>
              <div class="jbIcon" v-if="row.level == 'Minor'">
                <svg-icon icon-class="jb2" />
                <span style="color:#f4ea2a">次要</span>
              </div>
              <div class="jbIcon" v-if="row.level == 'Warning'">
                <svg-icon icon-class="jb1" />
                <span style="color:#1296db">警告</span>
              </div>
            </template>
          </el-table-column>
                   <el-table-column prop="nodeId" label="设备标识" align="center" min-width="140"/>
          <el-table-column prop="name" label="告警名称" align="center" min-width="180"/>
          <el-table-column prop="locateInformation" label="告警来源" align="center" min-width="160"/>
          <el-table-column prop="createTime" label="发生时间" align="center" min-width="140" >
            <template slot-scope="{ row }">
              {{ row.createTime |formatTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center" fixed="right">
            <template slot-scope="{row}">
              <el-button type="text" style="color:#F56C6C" size="mini" @click="onDel(row)" icon='el-icon-delete'>清除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align:right">
          <pagination v-show="pagination.total>0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as deviceApi from '@/api/link/device'
export default {
  comments: {},
  props: {},
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      tenantList: [],
      searchForm: {
        searchTime: []
      },
      multipleSelection: [],
      tableData: [

      ],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10
      },
      pickertime: [],
      checkList: []
    }
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight
      return curHeight - 280
    }
  },
  created() {
    this.search()
  },
  mounted() {
  },
  methods: {
    deleteAll() {
      if (!this.checkList.length) {
        return this.$message({
          type: 'error',
          message: '请选择要清除的报警'
        })
      } else {
        let arrId = []
        this.checkList.forEach(item => {
          arrId.push(item.id)
        })
        let ids = arrId.toString()
        this.$confirm('是否清除报警?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          deviceApi.clearAlarm(ids).then(resp => {
            if (resp.code == 200) {
              this.$message({
                type: 'success',
                message: '清除报警成功!'
              });
              if ((this.pagination.total - arrId.length) % this.pagination.pageSize == 0) {
                if (this.pagination.page > 1) {
                  this.pagination.page = this.pagination.page - 1;
                }
              }
              this.search();
              this.$store.dispatch('user/getNowAlarm')
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消清除'
          });
        });

      }
    },
    handleSelectionChange(val) {
      console.log('val: ', val);
      this.checkList = val
    },
    onChange(val) {
      this.pagination.page = 1
      var p = Object.assign(this.pagination);
      p.tenantId = this.tenantId
      if (val && this.searchForm.pickertime.length > 0) {
        p.startTime = this.searchForm.pickertime[0];
        p.endTime = this.searchForm.pickertime[1];
      }
    },
    getPageList() {
      this.search()
    },
    search() {
      const p = Object.assign({
        startTime: this.searchForm.pickertime ? this.searchForm.pickertime[0] : '',
        endTime: this.searchForm.pickertime ? this.searchForm.pickertime[1] : '', name: this.searchForm.name,
        nodeId: this.searchForm.nodeId,
        level: this.searchForm.level
      }, { page: this.pagination.page, pageSize: this.pagination.pageSize })
      deviceApi.nowAlarm(p).then(resp => {
        console.log(resp);
        this.tableData = resp.data.records
        this.pagination.total = resp.data.total
      })
    },

    onDel(row) {
      this.$confirm('是否清除该报警?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deviceApi.clearAlarm(row.id).then(resp => {
          if (resp.code == 200) {
            this.$message({
              type: 'success',
              message: '清除报警成功!'
            });
            if ((this.pagination.total - 1) % this.pagination.pageSize == 0) {
              if (this.pagination.page > 1) {
                this.pagination.page = this.pagination.page - 1;
              }
            }
            this.search();
            this.$store.dispatch('user/getNowAlarm')
          }
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消清除'
        });
      });
    }
  },
}
</script>

<style scoped lang="scss">
.nowAlarm {
  padding: 20px;

  .jbIcon {
    display: flex;
    align-items: center;
    justify-content: center;

    .svg-icon {
      font-size: 24px;
      margin-right: 15px;
    }
  }
  .detailUl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    li {
      width: 30%;
      line-height: 28px;
      word-break: break-all;
    }
  }
}
</style>
